<template>
<div>
  <!-- 缓存 -->
  <keep-alive :include="['Index']">
    <router-view></router-view>
  </keep-alive>

  <van-tabbar route v-model="active">
    <van-tabbar-item v-for="(icon,index) in tabbarList" :key='index' replace :to='icon.url'>
      <span>{{icon.name}}</span>
      <template #icon="props">
        <img :src="props.active ? icon.icon_active : icon.icon_inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>



</div>
</template>

<script>
  export default {
    name: 'Home',
    watch:{
      '$route.path':{
        handler(newpath,oldpath){

          // console.log(newpath)
        },
        immediate:true
      }
    }
    ,
    data() {
        return {
          active: 0,
          tabbarList:[
            {
              name:'首页',
              icon_active:require('../../static/icon/home-active.png'),
              icon_inactive:require('../../static/icon/home.png'),
              url:'/home'
            },
            {
              name:'分类',
              icon_active:require('../../static/icon/cate-active.png'),
              icon_inactive:require('../../static/icon/cate.png'),
              url:'/home/cate'
            },
            {
              name:'购物车',
              icon_active:require('../../static/icon/cart-active.png'),
              icon_inactive:require('../../static/icon/cart.png'),
              url:'/home/cart'
            },
            {
              name:'我的',
              icon_active:require('../../static/icon/user-active.png'),
              icon_inactive:require('../../static/icon/user.png'),
              url:'/home/user'
            }
          ]

        };
      },
  }


</script>

<style>
</style>
